<template>
  <div class="mymess">
    <div class="headbox">
      <div class="icon">
        <img
          @click="Personalhead"
          class="iconleft"
          src="../../../components/My/image/weibiaoti.png"
          alt=""
        />
        <h1>消息</h1>
        <img
          class="iconright"
          src="../../../components/My/image/xiaoxi_icon_qingchu.png"
          alt=""
        />
      </div>
      <div class="mymetab">
        <van-tabs v-model="active">
          <van-tab title="系统消息">
            <div class="vat-time">
              <span>2020-07-22 10:00:00</span>
            </div>
            <div class="vat-count">
              <div class="vat-head">
                <span
                  >点我参加【成分星球舒沁安 肤精华水】试用 一抹降噪 击
                  穿敏痘</span
                >
                <img
                  src="../../../components/My/image/xiaoxi_icon_photo1.png"
                  alt=""
                />
              </div>
              <div class="vat-introduce">
                本期试用规则：<br />
                1.点击申请参加（未做肤质测试的用户<br />
                可先完成肤质测试）<br />
                2.点击文章内的发给朋友分享活动<br />
                3.在7月12日-26日期间点评任意1款使用过的产品<br />
                <br />
                P.s.绑定手机号，中奖后方便我们能更快联系到您！ <br />
                <br />
                关注我们！体验更多护肤乐趣！
              </div>
            </div>
            <div class="vat-time">
              <span>2020-07-22 10:00:00</span>
            </div>
            <div class="vat-count">
              <div class="vat-head">
                <span
                  >点我参加【Whoo后拱辰享盈 润紧致防晒乳】试用 高倍防 护
                  挥退光老</span
                >
                <img
                  src="../../../components/My/image/xiaoxi_icon_photo2.png"
                  alt=""
                />
              </div>
              <div class="vat-introduce">
                本期试用规则：<br />
                1.点击申请参加（未做肤质测试的用户<br />
                可先完成肤质测试）<br />
                2.点击文章内的发给朋友分享活动<br />
                3.在7月12日-26日期间点评任意1款使用过的产品<br />
                <br />
                P.s.绑定手机号，中奖后方便我们能更快联系到您！ <br />
                <br />
                关注我们！体验更多护肤乐趣！
              </div>
            </div>
          </van-tab>
          <van-tab title="收到的评论">
            <div class="vat-time">
              <span>2020-07-22 10:00:00</span>
            </div>
            <div class="vat-count">
              <div class="vat-head">
                <span
                  >点我参加【Whoo后拱辰享盈 润紧致防晒乳】试用 高倍防 护
                  挥退光老</span
                >
                <img
                  src="../../../components/My/image/xiaoxi_icon_photo2.png"
                  alt=""
                />
              </div>
              <div class="vat-introduce">
                本期试用规则：<br />
                1.点击申请参加（未做肤质测试的用户<br />
                可先完成肤质测试）<br />
                2.点击文章内的发给朋友分享活动<br />
                3.在7月12日-26日期间点评任意1款使用过的产品<br />
                <br />
                P.s.绑定手机号，中奖后方便我们能更快联系到您！ <br />
                <br />
                关注我们！体验更多护肤乐趣！
              </div>
            </div>
          </van-tab>
          <van-tab title="赞和收藏">
            <div class="vat-time">
              <span>2020-07-22 10:00:00</span>
            </div>
            <div class="vat-count">
              <div class="vat-head">
                <span
                  >点我参加【成分星球舒沁安 肤精华水】试用 一抹降噪 击
                  穿敏痘</span
                >
                <img
                  src="../../../components/My/image/xiaoxi_icon_photo1.png"
                  alt=""
                />
              </div>
              <div class="vat-introduce">
                本期试用规则：<br />
                1.点击申请参加（未做肤质测试的用户<br />
                可先完成肤质测试）<br />
                2.点击文章内的发给朋友分享活动<br />
                3.在7月12日-26日期间点评任意1款使用过的产品<br />
                <br />
                P.s.绑定手机号，中奖后方便我们能更快联系到您！ <br />
                <br />
                关注我们！体验更多护肤乐趣！
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    Personalhead() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.mymess {
  width: 750px;
  height: 1624px;
  background: #f5f5f5;
  .headbox {
    width: 100%;
    height: 220px;
    background: #ffffff;
  }
  .icon {
    margin-left: 42px;
    height: 162px;
    line-height: 48px;
    padding-top: 114px;
    margin-right: 32px;
    margin-bottom: 25px;
  }
  .icon .iconleft {
    float: left;
    width: 30px;
    height: 30px;
    display: block;
    margin: 9px 0px;
  }
  .icon .iconright {
    float: left;
    width: 30px;
    height: 30px;
    margin-left: 230px;
    margin-top: 10px;
  }
  .icon h1 {
    float: left;
    width: 200px;
    height: 48px;
    position: relative;
    left: 275px;
    font-size: 35px;
  }
  //   .mymetab {
  //     // text-align: center;
  //   }
  .van-tab__text--ellipsis {
    width: 150px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .van-tabs__nav--line {
    padding: 0 1px 0 1px;
    font-size: 3.125rem;
  }
  .mymess .van-tab__text--ellipsis {
    width: 9.375rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: center;
  }
  .van-tab__text--ellipsis {
    text-align: center;
    font-size: 26px;
    height: 3.125rem;
    font-weight: bold;
    line-height: 3.125rem;
    font-weight: normal;
  }
  .van-tab--active {
    color: #1a82f7;
    font-weight: 500;
  }
  .van-tabs__line {
    position: absolute;
    bottom: 2px;
    left: 0;
    z-index: 1;
    width: 70px;
    height: 4px;
    background-color: #1a82f7;
    border-radius: 0.1875rem;
  }
  .van-tab__pane,
  .van-tab__pane-wrapper {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    height: 1400px;
  }
  .vat-time {
    width: 750px;
    height: 86px;
    // background: #1a82f7;
    padding-top: 22px;
  }
  .vat-time span {
    margin: 0px auto;
    text-align: center;
    display: block;
    width: 236px;
    height: 42px;
    line-height: 42px;
    background: #d0d0d0;
    color: #ffffff;
    font-size: 20px;
  }
  .vat-count {
    margin: 0 auto;
    width: 677px;
    height: 557px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
  }
  .vat-head {
    width: 677px;
    height: 192px;
  }
  .vat-count span {
    margin: 16px 0px 0px 23px;
    float: left;
    width: 380px;
    font-weight: bold;
    height: 126px;
    font-size: 30px;
  }
  .vat-count img {
    width: 192px;
    height: 192px;
    float: right;
  }
  .vat-introduce {
    height: 297px;
    font-size: 24px;
    color: #4a4a4a;
    margin: 0px 23px;
    border-bottom: 3px solid #e3e3e3;
  }
}
</style>
